<template>
  <div class="con">
    <div class="conent" ref="width">
      <slot></slot>
    </div>
    <div class="more" v-if="!props.isShowAll && state.isRoll" @click="toDown">
      展开<el-icon>
        <elementArrowDown />
      </el-icon>
    </div>
    <div class="more" v-if="!props.isShowAll && !state.isRoll" @click="toUp">
      收起<el-icon>
        <elementArrowUp />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, watch } from 'vue'
const width = ref()
const state = reactive({
  // 是否显示完整
  isShowAll: false,
  // 是否是收起状态
  isRoll: true,
})
const props = defineProps({
  width: String,
  height: String,
  isShowAll: {
    type: Boolean,
    default: false,
  },
})
const toDown = () => {
  state.isRoll = false
  width.value.style.overflow = 'black'
  width.value.style.height = ''
}
const toUp = () => {
  state.isRoll = true
  width.value.style.overflow = 'hidden'
  width.value.style.height = props.height
}
onMounted(() => {
  if (props.isShowAll) {
    width.value.style.width = ''
    width.value.style.height = ''
  } else {
    width.value.style.width = props.width
    width.value.style.height = props.height
  }
})
watch(
  () => props.isShowAll,
  () => {
    if (props.isShowAll) {
      width.value.style.width = ''
      width.value.style.height = ''
    } else {
      width.value.style.width = props.width
      width.value.style.height = props.height
    }
  }
)
</script>

<style lang="scss" scoped>
.con {
  position: relative;
  width: 100%;
  .conent {
    overflow: hidden;
  }
  .more {
    position: absolute;
    align-items: center;
    top: 8px;
    display: flex;
    right: 0px;
    font-size: 14px;
    font-weight: normal;
    cursor: pointer;
    color: #128bed;
  }
}
</style>
